<template>
  <view class="goods tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">商品详情</tn-navbar>
    <view class="goods-swiper">
      <!-- 轮播 -->
      <tn-swiper :data="swiperData" indicator-mode="round" :height="windowWidth + 'px'" radius="0"></tn-swiper>
    </view>
    <view class="goods-content">
      <view class="goods-tag">
        <tn-tag v-for="(item, index) in goods.goodsTags" class="goods-tag-item" font-size="26rpx">{{ item }}</tn-tag>
      </view>
      <view class="goods-brand">{{ goods.brandName }}</view>
      <view class="goods-name">{{ goods.goodsName }}</view>

      <view class="goods-price"><span>￥</span>{{
        goods.goodsPrice ? formatPrice(goods.goodsPrice, 2) : "0.00"
      }}</view>
      <view class="goods-desc tn-color-main">{{ goods.goodsDesc }}</view>

      <view class="goods-grade tn-flex-row">
        <view class="goods-grade-item tn-flex-1" v-for="(item, index) in goodsGradeOptions">
          <view class="goods-grade-item-border tn-flex-column"
            :class="item.value === goods.goodsGrade ? 'item-checked' : ''">
            <view v-if="item.value === goods.goodsGrade" class="item-red-block">
            </view>
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
    <view class="goods-service tn-flex-row">
      <view class="goods-service-item tn-flex-1">
        <TnIcon class="icon tn-color-main" icon="gift"></TnIcon>24H发货
      </view>
      <view class="goods-service-item tn-flex-1">
        <TnIcon class="icon tn-color-main" icon="vip"></TnIcon>权威鉴定
      </view>
      <view class="goods-service-item tn-flex-1">
        <TnIcon class="icon tn-color-main" icon="safe"></TnIcon>假一赔三
      </view>
    </view>
    <!-- <view class="goods-intro" v-html="goods.goodsIntro"> </view> -->
    <view class="goods-intro"> 
      <mp-html :content="goods.goodsIntro"></mp-html>
    </view>
    <view class="goods-tool tn-safe-area-inset-bottom">
      <view class="goods-tool-content tn-flex-row">
        <view class="tool-left tn-flex-2">
          <view class="tool-left-item" @click="servicePopup = true">
            <TnIcon class="icon" icon="message"></TnIcon>
            <view class="item-text">咨询</view>
          </view>
          <view class="tool-left-item" @click="collectGoods()">
            <TnIcon class="icon tn-color-red" :icon="collectIcon"></TnIcon>
            <view class="item-text">收藏</view>
          </view>
        </view>
        <view class="tool-right tn-flex-4">
          <view class="tool-right-item tn-flex-3">
            <!-- <view class="item-text">还价</view> -->
            <tn-button class="item-cart" type="info" @click="add()">加入购物车</tn-button>
          </view>
          <view class="tool-right-item tn-flex-3">
            <tn-button class="item-buy" type="primary" @click="buy()">立即购买</tn-button>
          </view>
        </view>
      </view>
    </view>
    <view class="white-block"> </view>
    <tn-popup v-model="servicePopup" mode="center" width="90%" height="400rpx">
      <view class="tn-flex-center tn-flex-column" style="height: 100%; width: 100%">
        <h2>请添加官方微信进行咨询沟通</h2>
        <view class="addWeiXin" @click="copyWeiXin()">
          一键复制微信号：HelloSylow
        </view>
        <view class="addWeiXin-desc">
          点击上方按钮，复制微信号后，前往微信进行添加
        </view>
      </view>
    </tn-popup>

    <tn-toast ref="toast"></tn-toast>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnSwiper from "@/tuniao-ui/components/tn-swiper/src/Swiper.vue";
import TnTag from "@/tuniao-ui/components/tn-tag/src/Tag.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnPopup from "@/tuniao-ui/components/tn-popup/src/Popup.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import { SwiperData } from "@/tuniao-ui/types";
import { formatPrice } from "@/tuniao-ui/utils";
import { findGoodsById } from "@/api/goods";
import { Goods } from "./lib/Goods";
import { addCard } from "@/api/order";

const goodsId = ref(0);

const servicePopup = ref<boolean>(false); // 咨询服务弹窗

const toast = ref<InstanceType<typeof TnToast>>();

const goods: Goods = reactive({
  id: 0,
  goodsName: "",
  goodsClassifyId: 0,
  goodsBrandId: 0,
  brandName: "",
  goodsSn: "",
  goodsDesc: "",
  goodsPrice: 0.0, // 商品销售价
  goodsCostPrice: 0.0, // 商品成本价
  goodsMarketPrice: 0.0, // 商品市场价格
  goodsSkuSn: "", //货号
  goodsStatus: 0,
  goodsImgs: [], // 商品图片
  goodsIntro: "",
  goodsGrade: 1,
  goodsTags: [],
  createTime: "",
});

const goodsGradeOptions = [
  {
    label: "全新",
    value: 1,
  },
  {
    label: "近新",
    value: 2,
  },
  {
    label: "卓越",
    value: 3,
  },
  {
    label: "优质",
    value: 4,
  },
  {
    label: "良好",
    value: 5,
  },
  {
    label: "合适",
    value: 6,
  },
];

// 轮播图数据
const swiperData = ref<SwiperData[]>([]);
const { updateSystemInfo, systemInfo } = useSystemInfo();
updateSystemInfo();
const windowWidth = systemInfo.value.windowWidth;

const collectIcon = ref("like");

onLoad((options: any) => {
  goodsId.value = options.goodsId;
  findGoodsById({ goodsId: goodsId.value }).then((res: any) => {
    const goodsInfo = res.result;
    Object.assign(goods, goodsInfo);
    for (const img of goods.goodsImgs) {
      swiperData.value.push({
        image: img,
      });
    }
  });
});

function copyWeiXin() {
  uni.setClipboardData({
    showToast: false,
    data: "HelloSylow",
    success: function () {
      //console.log("复制成功");
      toast.value?.show({
        title: "复制成功",
      });
    },
  });
}

function collectGoods() {
  if (collectIcon.value === "like") {
    collectIcon.value = "like-fill";
    toast.value?.show({
      title: "收藏成功",
    });
  }
  // test().then((res) => {
  //   console.log(res);
  // });
}

function add(){
  let params = {goodsId: goodsId.value, num: 1};
  addCard(params).then((res) => {
    console.log(res);
  });
}

function buy() {
  toast.value?.show({
    title: "复制成功",
  });
}
</script>

<style lang="scss" scoped>
.goods-content {
  padding: 30rpx 20rpx 10rpx 20rpx;
  background-color: #fff;

  .goods-tag {
    &-item {
      margin-right: 20rpx;
      padding: 10rpx;
    }

    &-item:nth-child(even) {
      background-color: rgb(32, 96, 48);
    }
  }

  .goods-brand {
    font-weight: bold;
    margin-top: 20rpx;
    font-size: 38rpx;
  }

  .goods-name {
    font-size: 30rpx;
    margin-top: 20rpx;
  }

  .goods-desc {
    margin-top: 20rpx;
    font-size: 28rpx;
    // color: #CCA220;
  }

  .goods-price {
    margin-top: 20rpx;
    font-weight: bold;
    font-size: 38rpx;

    span {
      font-size: 30rpx;
    }
  }

  .goods-grade {
    margin-top: 40rpx;
    margin-bottom: 40rpx;

    &-item {
      display: flex;

      &-border {
        padding-top: 20rpx;
        border-top: 6rpx solid #999;
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;

        .item-red-block {
          background-color: #b88230;
          height: 20rpx;
          width: 10rpx;
          margin-top: -40rpx;
          margin-bottom: 20rpx;
        }
      }

      .item-checked {
        border-top: 6rpx solid #b88230;
        color: #b88230;
      }
    }
  }
}

.goods-service {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  margin-top: 10rpx;

  &-item {
    justify-content: center;
    align-items: center;
    color: #333;
  }

  .icon {
    font-size: 50rpx;
    margin-right: 10rpx;
  }
}

.goods-intro {
  padding: 20rpx;
  background-color: #fff;
}

.goods-tool {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;

  &-content {
    background-color: #fff;
    height: 120rpx;
    width: 100%;

    .tool-left {
      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 120rpx;
        height: 100%;

        .icon {
          font-size: 50rpx;
          margin-bottom: 0rpx;
        }

        .item-text {
          font-size: 20rpx;
        }
      }
    }

    .tool-right {
      padding-top: 20rpx;

      .item-cart,
      .item-buy {
        width: 90%;
        font-size: 30rpx;
        margin-bottom: 15rpx;
      }
    }
  }
}

.white-block {
  width: 100%;
  height: 120rpx;
}

/** 咨询弹出框样式 */
.addWeiXin {
  border: 1px solid #b88230;
  color: #b88230;
  border-radius: 10rpx;
  padding: 15rpx 40rpx;
  margin: 50rpx 0;
}

.addWeiXin-desc {
  font-size: 28rpx;
  margin-top: 20rpx;
  color: #777;
}
</style>
